<template>
  <!-- 头部 -->
  <div class="headerbox">
    <div class="header">
      <!-- 返回 -->
      <div class="headerL">
        <a onclick="javascript:history.back(-1)" class="goback"><img src="/assets/images/goback.png" /></a>
      </div>
      <!-- 搜索 -->
      <div class="headerC0">
        <div class="ssdiv">
          <img src="/assets/images/ss.png" />
          <input v-model="keywords" @change="SelectKeywords" name="" type="text" placeholder="输入关键字..." />
        </div>
      </div>

      <!-- 侧边栏 切换分类-->
      <div class="headerR">
        <a href="javascript:void(0)" @click="show=!show">
          <img src="/assets/images/tr.png" />
        </a>
      </div>
    </div>
  </div>

  <!-- 筛选 (降序)
  v-model:下拉中，选中的是谁
  options：选项对应的数组
  @change 表单发生改变才可以筛选
-->
  <div class="shopType">
    <van-dropdown-menu>
      <van-dropdown-item v-model="flag" :options="option1" @change="SelectFlag" />
      <van-dropdown-item v-model="orderby" :options="option2" @change="SelectOrder" />
    </van-dropdown-menu>
  </div>
  <!-- -通过某类id查询商品- -->
  <div class="clear"></div>

  <div class="hbox"></div>
  <!-- 商品列表 -->
  <div class="mainWarp" style="background:#f3f3f3">
    <ul class="proul">
      <li v-for="item in prolist">
        <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
          <img :src="item.cover_cdn" />
        </router-link>
        <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
          <p class="tit">{{item.name}}</p>
        </router-link>
        <!-- 价格 -->
        <div class="price">
          <p>￥{{item.price}}</p>
          <van-tag type="danger" v-if="item.flag=='1'">新品</van-tag>
          <van-tag type="primary" v-if="item.flag=='2'">热销</van-tag>
          <van-tag type="success" v-if="item.flag=='3'">推荐</van-tag>
        </div>
      </li>
    </ul>
  </div>

  <!-- 侧边栏 切换分类- 切换时改变typeid-->
  <van-popup v-model:show="show" position="right">
    <div class="type">
      <van-sidebar v-model="active" @change="SelectType">
        <van-sidebar-item v-for="item in typelist" :title="item.name" />
      </van-sidebar>
    </div>
  </van-popup>
  <div class="clear"></div>
  <div class="h54"></div>
</template>

<script>
  export default {
    name: 'ProductType',

    created() {

      //  接收路由传过来的参数
      this.typeid = this.$route.query ? this.$route.query.typeid : 0
      // console.log(this.typeid);

      this.ProductData(); //钩子拿数据

    },

    data() {
      return {
        // 初始化
        typeid: 0,
        prolist: [],
        typelist: [],
        show: false,
        active: 0, //表示一个状态
        // 筛选(id,类型，价格)
        flag: 0, //按照热门类型-->option1
        orderby: 'id', //排序(知道商品id,肯定会知道价格，库存)
        keywords: '', //关键词 查询
        option1: [{
            text: '全部商品',
            value: 0
          },
          {
            text: '新款商品',
            value: 1
          },
          {
            text: '活动商品',
            value: 2
          },
          {
            text: '推荐商品',
            value: 3
          },
        ],
        option2: [{
            text: '默认排序',
            value: 'id'
          },
          {
            text: '价格排序',
            value: 'price'
          },
          {
            text: '库存排序',
            value: 'stock'
          },
        ],
      }
    },

    methods: {
      // 拿去商品信息
      async ProductData() {
        var data = {
          typeid: this.typeid,
          flag: this.flag,
          orderby: this.orderby,
          keywords: this.keywords

        }
        var result = await this.$api.ProductType(data);

        // console.log(result);
        // 未成功
        if (result.code == 0) {
          // 调用接口失败，提示信息
          this.$notify({
            type: 'danger',
            message: result.msg,
            duration: 1000,
            onClose: () => {
              this.$router.go(-1)
            }
          })
          return false
        }

        // 成功就覆盖数据
        this.prolist = result.data.prolist

        // 覆盖分类列表
        this.typelist = result.data.typelist
        // console.log(this.typelist);

        // console.log(this.prolist);

        // 默认分类显示，找出id==传过来时的 分类id,然后显示
        for (var key in this.typelist) {

          if (this.typelist[key].id == this.typeid) {
            this.active = key //v-model就是当前导航的索引
          }
        }
      },

      // 筛选  属性排序
      SelectFlag(value) {
        // console.log(value);
        // 覆盖
        this.flag = value

        // 请求商品数据
        this.ProductData()


      },
      // 选择排序
      SelectOrder(value) {
        // console.log(value);
        this.orderby = value

        // 请求商品数据
        this.ProductData()
      },

      // 关键词查询
      SelectKeywords() {
        // 直接再次请求接口
        this.ProductData()
      },

      // 切换分类
      SelectType(index) {
        this.active = index //覆盖下标
        console.log(index);

        this.typeid = this.typelist[index].id

        this.ProductData()

        this.show = false //点击完后，为隐藏

      }

    },

  }
</script>

<style>
  ul.proul li .price {
    display: flex;
    justify-content: space-between;
  }

  .container {
    margin-top: 2.5rem;
  }

  .type .van-sidebar {

    width: 100px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-top: 4em;
  }
</style>